@import "../variables/default.scss";
@import "../mixins/index.scss";

.at-grid {
  display: flex;
  flex-direction: column;

  /* elements */
  &__flex-item {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: $color-border-light;
    padding-top: $spacing-v-xl;
    padding-bottom: $spacing-v-xl;

    &::after {
      border-top: none;
      border-left: none;
    }
  }

  &__flex {
    display: flex;
    flex-direction: row;
    flex: 1;
    &--border {
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: $color-border-light;
    }
    &-0 {
      border-top-width: 0;
    }

    &:last-child {
      .at-grid__flex-item::after {
        border-bottom: none;
      }
    }
  }

  &__item {
    @include flex(1);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position: relative;

    &__content {
      //position: absolute;
      //width: 100%;
      //height: 100%;
      //left: 0;
      //top: 0;
    }

    &__content-inner {
      display: flex;
      flex-direction: column;
      @include align-items(center);
      @include justify-content(center);
      @include active;

      height: 100%;
      overflow: hidden;

      &__text {
        flex: 0 0 auto;
        margin-top: 12px;
        color: $at-grid-text-color;
        font-size: $at-grid-font-size;
        line-height: $line-height-zh * $at-grid-font-size;
        text-align: center;
        @include line(2);
      }

      &__icon {
        flex: 0 0 auto;
        //line-height: 1;
      }

      &__img {
        width: $at-grid-img-size;
        height: $at-grid-img-size;
      }
    }

    &--last {
      border-right-width: 0;
      &::after {
        border-right: none;
      }
    }

    &--rect {
      &::before {
        display: block;
        content: " ";
        padding-bottom: 130px;
      }

      &__content-inner {
        flex-direction: row;
        &__text {
          margin-left: 12px;
          //margin-top: initial;
          text-align: left;
        }
        &__img {
          width: $at-gird-img-size-sm;
          height: $at-gird-img-size-sm;
        }
      }
    }

    &--square {
      &::before {
        display: block;
        content: " ";
        padding-bottom: 100%;
      }
    }

    &--no-border {
      border-top-width: 0;
      border-right-width: 0;
      border-left-width: 0;
      border-bottom-width: 0;
      &::after {
        border: 0;
      }
    }

    &--active {
      background-color: $color-grey-6;
    }
  }
}
